@using OrchardCore.Commerce.Settings
@using OrchardCore.Commerce.Abstractions

@{
    int index = Model.Index;
    var attr = Model.AttributeDescription as ProductAttributeDescription;
    var settings = attr.Settings as TextProductAttributeFieldSettings;
    var id = $"{Model.IdPrefix}-attribute-{index}";
    int optionIndex = 0;
}

<label for="@id">@attr.Name</label>
<input type="hidden" name="line.Attributes[@index].Key" value="@attr.PartName.@attr.Name" />
@if (settings.PredefinedValues is null || settings.PredefinedValues.Length == 0)
{
    <input id="@id" type="text" name="line.Attributes[@index].Value" value="@settings.DefaultValue" placeholder="@settings.Placeholder" class="form-control" />
}
else if (settings.MultipleValues)
{
    <ul>
        @foreach (string predefinedValue in settings.PredefinedValues)
        {
            var optionId = $"{id}-{optionIndex++}";
            <li>
                <input id="optionId" type="checkbox" name="line.Attributes[@index].Value" checked="@(predefinedValue == settings.DefaultValue)" class="form-check-input" />
                <label for="@optionId" class="form-check-label">@predefinedValue</label>
            </li>
        }
    </ul>
}
else if (settings.RestrictToPredefinedValues)
{
    if (settings.PredefinedValues.Length > 5) // Doing radio buttons for less than 5 options
    {
        <select id="@id" name="line.Attributes[@index].Value" class="form-control">
            @foreach (string predefinedValue in settings.PredefinedValues)
            {
                <option selected="@(predefinedValue == settings.DefaultValue)">@predefinedValue</option>
            }
        </select>
    }
    else
    {
        <ul>
            @foreach (string predefinedValue in settings.PredefinedValues)
            {
                var optionId = $"{id}-{optionIndex++}";
                <li>
                    <input id="@optionId" type="radio" name="line.Attributes[@index].Value" value="@predefinedValue" checked="@(predefinedValue == settings.DefaultValue)" class="form-check-input" />
                    <label for="@optionId" class="form-check-label">@predefinedValue</label>
                </li>
            }
        </ul>
    }
}
else
{
    <input id="@id" type="text" name="line.Attributes[@index].Value" value="@settings.DefaultValue" placeholder="@settings.Placeholder" class="form-control" />
    <select data-related="line.Attributes[@index].Value" class="product-attribute-combo-select form-control">
        @foreach (string predefinedValue in settings.PredefinedValues)
        {
            <option selected="@(predefinedValue == settings.DefaultValue)">@predefinedValue</option>
        }
    </select>
    <script at="Foot">
        $(function () {
            $(".product-attribute-combo-select").on('change', function (e) {
                var select = $(e.target);
                select
                    .closest('form')
                    .find('input[name="' + select.data('related') + '"]')
                    .val(select.val());
            });
        });
    </script>
}
@if (settings.Hint != null)
{
    <div class="hint form-text text-muted">@settings.Hint</div>
}